<template>
  <div class="content-box">
    <el-descriptions :column="3" size="large">
      <el-descriptions-item label-class-name="right-align" label="单据名称："
        ><span class="text--info subtext">{{
          baseInfo?.billName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label-class-name="right-align" label="所属项目："
        ><span class="text--info subtext">{{
          baseInfo?.projectName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label-class-name="right-align" label="所属阶段："
        ><span class="text--info subtext">{{
          baseInfo?.projectStageName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label-class-name="right-align" label="单据类型：">
        <span class="text--info subtext">{{
          baseInfo?.billType
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label-class-name="right-align" label="提交人：">
        <span class="text--info subtext">{{
          baseInfo?.createUserName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label-class-name="right-align" label="提交时间：">
        <span class="text--info subtext">{{
          baseInfo?.createTime
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label-class-name="right-align" label="参考模板：">
        <div
          v-if="baseInfo?.templateAttachment"
          style="display: inline-block; vertical-align: top"
        >
          <p
            class="text--info download-link subtext"
            v-for="(item, index) in baseInfo?.templateAttachment"
            :key="index"
            @click="downloadUrlFile(item.uuidFile, item.fileName)"
          >
            <el-link :underline="false">{{ item?.fileName }}</el-link>
          </p>
        </div>
        <div
          class="text--info subtext"
          style="display: inline-block; vertical-align: top"
          v-else
        >
          -
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, watch, ref } from "vue";
import { downloadUrlFile } from "/@/utils/file";

const props = defineProps({
  basicInfoData: {
    type: Object,
    default: () => {}
  }
});

let baseInfo = ref(null);

watch(
  () => props.basicInfoData,
  newVal => {
    if (newVal) {
      baseInfo.value = newVal;
    }
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
// .divider {
//   margin-bottom: 10px;
//   // border-left: 3px solid #409eff;
//   text-indent: 8px;
// }
// .content {
//   width: 100%;
//   margin-bottom: 20px;
// }

// :deep .el-select {
//   width: 100%;
// }
// :deep .el-date-editor {
//   width: 100%;
// }
</style>
